.container {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

::deep .grid-value {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

::deep .button-container {
    margin-left: 0; /* by default there shouldn't be a margin on the button container because it has no contents */
}

::deep .masking-enabled .button-container, td:hover .button-container, td:focus-within .button-container {
    /* the button container always has contents if masking is enabled or it is hovered over, so display margin */
    margin-left: calc((6 + (var(--design-unit) * var(--density))) * 1px);
}

::deep .defaultHidden {
    opacity: 0;
    cursor: pointer;
    width: 0;
    display: inline-block;
}

td:hover > .container > .button-container > .defaultHidden, td:focus-within > .container > .button-container > .defaultHidden {
    opacity: 1; /* safari has a bug where hover is not always called on an invisible element, so we use opacity instead */
    width: auto;
}
